import { type FC } from 'react';
import { View } from 'react-native';
import styles from './styles';

type IndicatorsProps = {
  total: number;
  index: number;
}

const Indicators: FC<IndicatorsProps> = (props) => {
  const { total, index = 0 } = props;
  const items = Array.from({ length: total });
  return (
    <View style={styles.container}>
      {items.map((_, i) => {
        const active = i <= index;
        const last = i + 1 === items.length;
        return (
          <View
            key={i}
            style={[
              styles.item,
              last && styles.last,
              active && styles.active
            ]}
          />
        );
      })}
    </View>
  );
}

export default Indicators;